<html>
    <head>
        <title>Test</title>
        <style>

button { display:block; margin:1em; }

        </style>
        <script>


document.on("click","button#info", function() 
{
  var r = Window.this.modal(<info>Hello world!</info>);
  console.log(r);
});

document.on("click","button#alert", function() 
{
  var r = Window.this.modal(<alert caption="that's a demo"><p>Don't worry</p>
                      <p>That is just a demo of alert box</p></alert>);
  console.log(r);
});

document.on("click","button#error", function() 
{
  var r = Window.this.modal(<error><p>Don't worry</p>
                      <p>That is just a demo of error report.</p></error>);
  console.log(r);
});

document.on("click","button#buttons", function() 
{
  var r = Window.this.modal(
    <question>
      <content>Be or not to be?</content>
      <buttons>
         <button id="yes" role="default-button">Yes</button>
         <button id="no" role="cancel-button">No</button>
      </buttons>
    </question>);
  console.log(r);
});


document.on("click","button#styling", function() 
{
  var r = Window.this.modal(<alert caption="that's a demo" styleset={__DIR__ + "custom.css#alert!"}><p>Don't worry</p>
                      <p>That is just a demo of alert box</p></alert>);
  console.log(r);
});


        </script>
    </head>
    <body>

      Configurable msgboxes:

      <button id="info">info message box</button>
      <button id="alert">alert message box</button>
      <button id="error">error message box</button>

      <button id="buttons">custom buttons</button>

      <button id="styling">custom styling</button>

    </body>
</html>